[HTML5] Video 태그 사용 방법 및 예제 정리

Last Modified : 2020-11-26 / Created : 2020-02-12

27,006
View Count

주소 복사하기

아래는 HTML5의 Video 태그의 사용 방법과 예제 등 다양한 내용을 정리하였습니다.

# Video 태그는?

미디어 파일인 비디오나 오디오 등을 재생하기 위해서 HTML5부터 새롭게 추가된 API가 바로 Video 그리고 Audio입니다. 이 둘은 실제로 거의 비슷한 메소드와, 프로퍼티를 가지고 있습니다. 여기서는 Video 태그에 대하여 알아봅니다.

! Video 태그의 특징은?

video 태그는 다양한 포맷을 지원하며 비디오 영상을 쉽고 간단하게 재생할 수 있습니다. video 태그를 사용해 다양한 브라우저 및 환경에서 재생 가능합니다.

Video 태그를 사용하는 방법은 간단합니다. 아래와 같이 적용합니다. 만약 a.mp4라는 파일을 재생한다면 아래와 같이 두 가지 방법을 사용합니다.

위에 코드처럼 src 프로퍼티를 사용하는 방법과 내부의 <source>태그를 사용할 수 있습니다. 두 가지 방법 모두 많이 사용되는 방법입니다.

! video 태그 자동 재생 방법

video 태그에 autoplay 속성을 사용하여 자동재생이 가능합니다. 즉 방문자가 웹페이지에 접속하면 자동으로 영상이 재생되게 됩니다.

이 방법은 일반적인 경우에는 자주 사용되지 않지만 웹페이지의 백그라운드 배경에서 영상 재생시 주로 사용됩니다. 다만 모바일 환경에서 자동 재생이 안될 수 있습니다. 관련 내용은 하단의 모바일 자동 재생에서 참고하세요.

! 메소드 정보

아래는 video 태그 메소드 정보입니다.
play() // 영상 재생하기
pause() // 영상 멈춤, 정지

! 프로퍼티 정보

아래는 vidoe 태그 프로퍼티 정보입니다.

# 이슈사항과 해결방안

아래는 Video 태그를 적용하면서 나타날 수 있는 다양한 정보들입니다.

! video 태그의 소스 src를 다이나믹하게 바꾸는 방법

만약 video 태그의 소스를 a에서 b로 바꾸는 경우 실제 웹에서 재생되지 않거나 에러가 나타날 수 있습니다. 이 경우 어떻게 해결할 수 있을까요?

이슈상황을 확인하기 위해서 코드를 재현해보고자 합니다. 먼저 아래와 같은 video 태그가 있습니다.

이제 a.mp4 영상을 자바스크립트에서 b.mp4로 바꾸어보려고합니다. 아래와 같이 코드를 작성하고 실행해봅니다.

let _video = document.querySelector('#testVideo');
_video.src = 'b.mp4';

_video.play(); // 에러가 발생할 수 있음

브라우저의 소스 보기를 사용하면 b.mp4로 바뀐 모습이 나타납니다. 하지만 실제 재생해보면 에러가 발생할 수 있습니다. 이 때 어떻게 해결할 수 있을까요? 가장 중요한 부분은 load() 메소드를 사용하여 비디오 정보를 다시 로드하는 것입니다. 이제 아래처럼 load()를 추가해 다시 작성해보겠습니다.

let _video = document.querySelector('#testVideo');
_video.removeAttribute('src'); // src 프로퍼티를 제거
_video.src = 'b.mp4'; // 다른 미디어로 소스 변경
_video.load(); // 새로운 정보를 다시 로드

_video.play(); // 잘 동작함

이와 같이 해결되었습니다.